<template>
  <page class="level-container">
    <TitleBar title="用户等级权限管理" refresh />
    <panel class="data-list" :header-style="{padding: '10px'}">
      <el-row slot="header">
        <el-col :span="12"><span>数据列表</span></el-col>
      </el-row>
      <div class="dbd" style="min-height:500px;">
        <el-table
          :data="authorityData"

          :header-cell-style="{
            'background-color': '#fafafa',
            'color':'#333',
            'height':'56px',
            'line-height':'56px',
            'font-size':'14px',
            'background': 'rgba(242, 242, 242, 1)'
          }"
        >
          <el-table-column label="等级名称" align="center" prop="">
            <template slot-scope="scope">{{ scope.row[0].levelName }}</template>
          </el-table-column>
          <el-table-column label="聚合金币值满足点" align="center">
            <template slot-scope="scope">{{ scope.row[0].goldMeet }}</template>
          </el-table-column>
          <el-table-column label="免费交换名片次数" align="center">
            <template slot-scope="scope">{{ scope.row[0].freeTimes }} 次</template>
          </el-table-column>
          <el-table-column label="交换名片收费标准" align="center">
            <template slot-scope="scope">- {{ scope.row[0].overCost }} 金币/次</template>
          </el-table-column>
          <el-table-column label="免费查看信息次数" align="center">
            <template slot-scope="scope">{{ scope.row[1].freeTimes }} 次</template>
          </el-table-column>
          <el-table-column label="查看信息收费标准" align="center">
            <template slot-scope="scope">- {{ scope.row[1].overCost }} 金币/次</template>
          </el-table-column>
          <el-table-column label="免费关注信息次数" align="center">
            <template slot-scope="scope">{{ scope.row[2].freeTimes }} 次</template>
          </el-table-column>
          <el-table-column label="关注信息收费标准" align="center">
            <template slot-scope="scope">- {{ scope.row[2].overCost }} 金币/次</template>
          </el-table-column>
          <el-table-column prop="remarks" label="备注" align="center">
            <template slot-scope="scope">{{ scope.row[0].remarks }}</template>
          </el-table-column>

          <el-table-column prop="action" label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="edithandleClick(scope.row)">编辑</el-button>
              <!-- <el-button type="text" size="small" style="color:#FF2C2C" @click="delhandleClick(scope.row)">删除</el-button> -->
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- <pagination :pagination="pagination1" @changepage="getList" /> -->
      <!-- 对话框 -->
      <div class="dialog">
        <el-dialog title="提示" :visible.sync="editlevelDialog" width="844px" center>
          <div slot="title" class="header-title">
            <span class="title-name">编辑等级权限设置</span>
          </div>
          <div class="dialog-bd">
            <el-form
              ref="addForm"
              :model="addForm"
              :rules="rules"
              :label-position="labelPosition"
              label-width="100px"
            >
              <el-form-item label="等级名称:">
                <el-input v-model="addForm.authorityName" disabled type="text" class="p1" style="width:240px" />
              </el-form-item>
              <el-form-item label="设置条件:" />
              <el-form-item label="免费交换:">
                <el-col :span="12">
                  <el-form-item prop="freeTimes">
                    <el-input
                      v-model="addForm.freeTimes"
                      type="text"
                      placeholder="请输入数量"
                      style="width:150px"
                    />  次,
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item prop="overCost">
                    超出扣取金币
                    <el-input
                      v-model="addForm.overCost"
                      type="text"
                      placeholder="请输入数量"
                      style="width: 150px"
                    /> 枚/次
                  </el-form-item>
                </el-col>
              </el-form-item>
              <el-form-item label="免费查看:">
                <el-col :span="12">
                  <el-form-item prop="seeMsg">
                    <el-input
                      v-model="addForm.seeMsg"
                      type="text"
                      placeholder="请输入数量"
                      style="width: 150px"
                    />  次,
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item prop="seeCoin">
                    超出扣取金币
                    <el-input
                      v-model="addForm.seeCoin"
                      type="text"
                      placeholder="请输入数量"
                      style="width: 150px"
                    /> 枚/次
                  </el-form-item>
                </el-col>
              </el-form-item>
              <el-form-item label="免费关注:">
                <el-col :span="12">
                  <el-form-item prop="share">
                    <el-input
                      v-model="addForm.share"
                      type="text"
                      placeholder="请输入数量"
                      style="width: 150px"
                    />  次,
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item prop="coin">
                    超出扣取金币
                    <el-input
                      v-model="addForm.coin"
                      type="text"
                      placeholder="请输入数量"
                      style="width: 150px"
                    /> 枚/次
                  </el-form-item>
                </el-col>
              </el-form-item>
            </el-form>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button
              style="width: 100px;height: 40px;background: rgba(204, 204, 204, 1);border-radius: 2px;"
              @click="editlevelDialog = false"
            >取 消</el-button>
            <el-button
              type="primary"
              style="width: 100px;height: 40px;background:rgba(72,141,255,1);border-radius: 2px;"
              @click="update('addForm');"
            >确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </panel>
  </page>
</template>
<script>
import { getRankList, updateRankList } from '@/api/usermanage.js'
export default {
  data() {
    var checkNum = (rule, value, callback) => {
      var bool = /^[1-9][0-9]*$/.test(value)
      if (!bool) {
        return callback(new Error('请输入大于0的整数'))
      } else {
        callback()
      }
    }
    return {
      testData: [
        {
          userlevel: '普通用户',
          coin: '1',
          yqaward: '5'
        }
      ],
      authorityData: [],
      // 弹窗内容
      editlevelDialog: false,
      addForm: {},
      labelPosition: 'left',
      postData: {},
      pagination1: {},
      rules: {
        freeTimes: [{ validator: checkNum, trigger: 'blur' }],
        overCost: [{ validator: checkNum, trigger: 'blur' }],
        seeMsg: [{ validator: checkNum, trigger: 'blur' }],
        seeCoin: [{ validator: checkNum, trigger: 'blur' }],
        share: [{ validator: checkNum, trigger: 'blur' }],
        coin: [{ validator: checkNum, trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList(pageNum = 1) {
      getRankList().then(res => {
        // this.pagination1 = res.data
        this.authorityData = res.data.list
      })
    },
    // 编辑
    edithandleClick(row) {
      console.log(row)
      this.editlevelDialog = true
      const editForm = {
        authorityName: row[0].levelName,
        freeTimes: row[0].freeTimes,
        overCost: row[0].overCost,
        seeMsg: row[1].freeTimes,
        seeCoin: row[1].overCost,
        share: row[2].freeTimes,
        coin: row[2].overCost
      }
      this.addForm = editForm
      const data = {
        'levelCode': row[0].levelCode,
        'authorityList':
        [
          {
            'authorityCode': row[0].authorityCode,
            'authorityName': row[0].authorityName,
            'freeTimes': '',
            'overCost': ''
          }, {
            'authorityCode': row[1].authorityCode,
            'authorityName': row[1].authorityName,
            'freeTimes': '',
            'overCost': ''
          }, {
            'authorityCode': row[2].authorityCode,
            'authorityName': row[2].authorityName,
            'freeTimes': '',
            'overCost': ''
          }
        ]
      }
      this.postData = data
    },
    update(formName) {
      this.$set(this.postData.authorityList[0], 'freeTimes', this.addForm.freeTimes)
      this.$set(this.postData.authorityList[0], 'overCost', this.addForm.overCost)
      this.$set(this.postData.authorityList[1], 'freeTimes', this.addForm.seeMsg)
      this.$set(this.postData.authorityList[1], 'overCost', this.addForm.seeCoin)
      this.$set(this.postData.authorityList[2], 'freeTimes', this.addForm.share)
      this.$set(this.postData.authorityList[2], 'overCost', this.addForm.coin)
      // console.log(this.postData)
      this.$refs[formName].validate((valid) => {
        if (valid) {
          updateRankList(this.postData).then(res => {
            this.$message.success('编辑成功')
            this.getList()
            this.editlevelDialog = false
          })
        } else {
          this.$message.error('编辑失败')
          // return false
        }
      })
    }
    // 删除
    // delhandleClick(row) {
    //   console.log(row)
    //   var id = row.id
    //   console.log(id)
    //   // this.editlevelDialog = true;
    //   deleusersLevel({ ids: id }).then(res => {
    //     this.getList()
    //   })
    // },
  }
}
</script>
<style lang="scss" scoped>
.level-container {
  .data-list {
    // 楠
    .dialog {
      .header-title {
        text-align: left;
        .title-name {
          position: relative;
          padding-left: 20px;
          line-height: 1.8em;
        }
        .title-name:before {
          content: "";
          display: block;
          position: absolute;
          top: -1px;
          left: 0px;
          display: block;
          width: 11px;
          height: 20px;
          background: -webkit-gradient(linear, right top, left top, from(#4859ff), to(#488dff));
          background: linear-gradient(-90deg, #4859ff, #488dff);
          border-radius: 4px;
        }
      }
      .dialog-bd {
        .dialog-footer {
          .el-button {
            width: 100px;
            height: 40px;
            background: rgba(204, 204, 204, 1);
            border-radius: 2px;
          }
        }
      }
    }
  }
}
</style>

